<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 class="user-title">用户管理</h1>
      </div>
      <div>
        <router-link to="/user/save" class="user-update">
          <el-button type="primary">添加</el-button>
        </router-link>
        <el-button type="danger">批量删除</el-button>
      </div>
      <el-table :data="users" border style="width: 100%" v-loading="loading">
        <el-table-column width="60" type="selection" align="center">
        </el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
        <el-table-column label="创建时间">
          <template v-slot="{ row }">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template v-slot="{ row }">
            {{ formatTime(row.updateTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="address" label="操作" align="center">
          <template v-slot="{ row }">
            <router-link :to="`/user/update/${row.id}`">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                class="modification-btn"
              ></el-button>
            </router-link>
            <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                slot="reference"
                @click="open(row)"
              ></el-button>
            
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="1"
        :page-sizes="[3, 6, 9, 12, 15]"
        :page-size="3"
        layout=" prev, pager, next, jumper,sizes,total"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapActions, mapState } from "vuex";
import {reqDeleteUser} from '../api/users'
export default {
  name: "User",
  data() {
    return {
      page: 1,
      limit: 3,
      loading: false,
    };
  },
  methods: {
    ...mapActions(["getReqPaging", "allReqUsers"]),
    formatTime(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getUserPaging(page, this.limit);
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.getUserPaging(this.page, limit);
    },
    async getUserPaging(page, limit) {
      this.loading = true;
      await this.getReqPaging({ page, limit });
      this.loading = false;
    },
     open(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await reqDeleteUser(row.id)
          await this.getUserPaging(this.page, this.limit);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
  computed: {
    ...mapState(["users", "total"]),
  },
  mounted() {
    this.getUserPaging(this.page, this.limit);
    this.allReqUsers();
  },
};
</script>

<style  >
.user-title {
  text-align: center;
}

.el-pagination {
  display: flex;
}
.el-pagination__jump {
  flex: 1;
}
.user-update {
  margin-right: 10px;
}
.box-card .modification-btn {
  margin-right: 10px;
}

</style>
